<template lang="pug">
.view.cp-train-course.fix-flex-pos
  //- 查询
  el-form.ce-search(:inline="true")
    el-form-item
      el-input(v-model="crsName", placeholder="课程名称", style="width: 160px")
    el-form-item(label="课程分类 : ")
      el-select(v-model="crsType", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in crsTypeSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="授课方式 : ")
      el-select(v-model="crsForm", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in crsFormSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="培训机构 : ")
      el-select(v-model="crsAgency", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in agencySelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="培训老师 : ")
      el-select(v-model="crsTeacher", placeholder="请选择", style="width: 120px")
        el-option(
          v-for="item in teacherSelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-form-item(label="可选必选 : ")
      el-select(v-model="crsProperty", placeholder="请选择", style="width: 108px")
        el-option(
          v-for="item in propertySelectAll",
          :key="item.value",
          :label="item.name",
          :value="item.value")
    el-button(type="primary", @click="searchCourses") 搜索
    el-button(type="primary", @click="resetSearch", plain) 重置
  .ce-table
    el-table(:data="courseList", highlight-current-row, height="100%", size="mini", v-loading="loadingCourses")
      el-table-column(align="center", type="index", label="序号", :fixed="true")
      el-table-column(align="center", show-overflow-tooltip, prop="id", label="指派编号")
      el-table-column(align="center", show-overflow-tooltip, prop="unionName", label="组合名称")
      el-table-column(align="center", show-overflow-tooltip, prop="unionId", label="组合编号")
      el-table-column(align="center", show-overflow-tooltip, prop="courceName", label="课程名称")
      el-table-column(align="center", show-overflow-tooltip, prop="courceId", label="课程编号")
      el-table-column(align="center", show-overflow-tooltip, prop="type", label="课程分类")
        template(slot-scope="scope")
          span {{ scope.row.type | compare-list(crsTypeSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="form", label="授课方式")
        template(slot-scope="scope")
          span {{ scope.row.form | compare-list(crsFormSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="agency", label="培训机构")
        template(slot-scope="scope")
          span {{ scope.row.agency | compare-list(agencySelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="address", label="教师地点")
      el-table-column(align="center", show-overflow-tooltip, prop="teacher", label="培训老师")
        template(slot-scope="scope")
          span {{ scope.row.teacher | compare-list(teacherSelect) }}
      el-table-column(align="center", show-overflow-tooltip, prop="trainTime", label="培训时间")
        template(slot-scope="scope")
          span {{ scope.row.trainTime | date-format }}
      el-table-column(align="center", show-overflow-tooltip, prop="expireTime", label="到期时间")
        template(slot-scope="scope")
          span {{ scope.row.expireTime | date-format }}
      el-table-column(align="center", show-overflow-tooltip, prop="property", label="必选可选")
        template(slot-scope="scope")
          span {{ scope.row.property | compare-list(propertySelect) }}
      el-table-column(align="left", label="操作", min-width="90px")
        template(slot-scope="scope")
          el-tooltip(content="查看")
            i.icon-act.el-icon-view(@click="viewCourse(scope.row)")
          el-tooltip(content="播放")
            i.icon-act.el-icon-info(@click="playCourse(scope.row)")
          el-dropdown(v-show="!scope.row.property")
            i.icon-act.el-icon-more
            el-dropdown-menu(slot="dropdown")
              el-dropdown-item.act-item(@click.native="refuseCourse(scope.row, scope.$index)")
                i.icon-act.el-icon-close
                span 拒绝
              el-dropdown-item.act-item(@click.native="deleteCourse(scope.row, scope.$index)")
                i.icon-act.el-icon-delete
                span 删除
  //- 分页
  el-pagination.ce-pagination(
    layout="total, prev, pager, next, jumper",
    @current-change="changeCoursePage",
    :current-page.sync="currentPage",
    :page-size="20",
    :total="courseListTotal")
  el-dialog.ce-dialog(title="课程学习", :visible.sync="showOffLine")
    h3 课程进度
    p
      el-input-number(v-model="crsOffRate", :min="0", :max="100")
      span.percent %
    el-row
      el-col.btn-container(:span="24")
        el-button.btn(type="primary", plain, @click="showOffLine=false") 取消
        el-button.btn.btn-after(type="primary", plain, @click="saveOffCourseRate") 确定
  CourseOnLine(:visible="showOnLine", :detail="courseDetail", @close="showOnLine=false")
  CourseView(:visible="showCourseView", :detail="courseDetail", @close="showCourseView=false")
</template>

<script>
import { mapGetters } from 'vuex';
import TrainData from '@/data/train';
import CourseView from '@/components/train/course/CourseView';
import CourseOnLine from '@/components/train/course/CourseOnLine';

export default {
  name: 'tracourse',
  components: {
    CourseOnLine,
    CourseView
  },
  data() {
    return {
      // search block
      crsName: null,
      crsType: null,
      crsForm: null,
      crsAgency: null,
      crsTeacher: null,
      crsProperty: null,
      //
      propertySelectAll: [
        { value: null, name: '全部' },
        { value: 0, name: '可选' },
        { value: 1, name: '必选' }
      ],
      propertySelect: [
        { value: 0, name: '可选' },
        { value: 1, name: '必选' }
      ],
      // table block
      courseList: [],
      courseListTotal: 1,
      loadingCourses: true,
      currentPage: 1,
      // view
      showCourseView: false,
      courseDetail: {},
      // offLine
      showOffLine: false,
      crsOffRate: 0,
      // online
      showOnLine: false
    };
  },
  computed: {
    ...mapGetters([
      'crsTypeSelect',
      'crsTypeSelectAll',
      'crsFormSelect',
      'crsFormSelectAll',
      'agencySelect',
      'agencySelectAll',
      'teacherSelect',
      'teacherSelectAll',
      'waitCount',
    ])
  },
  methods: {
    // 搜索
    resetSearch () {
      this.crsName = null;
      this.crsType = null;
      this.crsForm = null;
      this.crsAgency = null;
      this.crsTeacher = null;
      this.crsProperty = 0;
    },
    searchCourses () {
      this.loadingCourses = true;
      setTimeout(() => {
        this.courseList = TrainData.courseList;
        this.courseListTotal = 86;
        this.currentPage = 1;
        this.$message.success('刷新成功');
        this.loadingCourses = false;
      }, 1000);
    },
    // 表格
    viewCourse (row) {
      // TraApi.getCourseDetail({ id: row.order }).then((result) => {
      //   if (!result.status) {
      console.log(row.id);
      this.courseDetail = TrainData.courseDetail;
      this.showCourseView = true;
      //   } else {
      //     this.$message.error(result.comment);
      //   }
      // }).catch((error) => {
      //   console.log(JSON.stringify(error));
      // });
    },
    playCourse (row) {
      if (row.form === 2) {
        this.playOffLine();
      } else {
        this.playOnline(row);
      }
    },
    playOnline (row) {
      console.log(row.id);
      this.courseDetail = TrainData.courseDetail;
      this.showOnLine = true;
    },
    playOffLine () {
      this.crsOffRate = 30;
      this.showOffLine = true;
    },
    saveOffCourseRate () {
      console.log('save');
    },
    refuseCourse (row, index) {
      this.$confirm('此操作将拒绝此课程学习, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingCourses = true;
        setTimeout(() => {
          console.log(row);
          this.loadingCourses = false;
          this.courseList.splice(index, 1);
          this.courseListTotal = this.courseListTotal - 1;
          // 更新待学课程提示数量
          const count = this.waitCount - 1;
          if (count >= 0) {
            this.$store.dispatch('setWaitCount', count);
          }
          this.$message.success('拒绝成功');
        }, 1000);
      }).catch(() => {
        this.$message.info('已取消拒绝');
      });
    },
    deleteCourse (row, index) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingCourses = true;
        setTimeout(() => {
          console.log(row);
          this.loadingCourses = false;
          this.courseList.splice(index, 1);
          this.courseListTotal = this.courseListTotal - 1;
          // 更新待学课程提示数量
          const count = this.waitCount - 1;
          if (count >= 0) {
            this.$store.dispatch('setWaitCount', count);
          }
          this.$message.success('删除成功');
        }, 1000);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    // 翻页
    changeCoursePage (currentPage) {
      console.log(currentPage);
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {
    setTimeout(() => {
      this.courseList = TrainData.courseList;
      this.courseListTotal = 121;
      this.loadingCourses = false;
    }, 1000);
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 104px
$PAGEHEIGHT: 56px
.cp-train-course
  .ce-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
  .ce-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow: auto
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
  .ce-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
  .ce-dialog
    h3
      margin-bottom: 8px
      font-weight: 500
    p
      width: 360px
      margin-bottom: 32px
      .percent
        font-weight: 600
        margin-left: 8px
    .btn-container
      text-align: center
      margin-bottom: 16px
    .btn
      width: 80px
    .btn-after
      margin-left: 40px
</style>
